<template>
  <div class="main" style="display: flex;">
    <div style="width: 35%;margin-right: 10px;">
        <h3>计费管理 / 缴费类性管理</h3>
        <div style="display: flex;margin-top: 15px;margin-bottom: 15px;">
            <el-input class="input1" size="medium"  v-model="input1" placeholder="项目价格" style="flex: 1; margin-right: 15px;"></el-input>
            <el-select v-model="select1" class="select1" size="medium" clearable placeholder="通知状态" style="flex: 1; ">
                <el-option
                label="已缴费"
                :value="1">
                </el-option>
                <el-option
                label="未缴费"
                :value="2">
                </el-option>
            </el-select>
        </div>
        <div>
            <el-tree :data="paytree" :props="defaultProps" default-expand-all="true" @node-click="handleNodeClick"></el-tree>
        </div>
    </div>
    <div style="flex: 1;">
        <div style="display: flex;justify-content: space-between;margin-bottom: 10px;">
            <h2>电费目录</h2>
            <div style="display: flex;">
                <el-button icon="el-icon-search" @click="lookfor" type="primary">查询</el-button>
                <el-button icon="el-icon-plus" @click="addpay" type="success">新增</el-button>
                <el-button icon="el-icon-refresh" @click="reloadpay" type="primary">刷新</el-button>
                <el-button icon="el-icon-upload2" @click="exportpay" type="primary">导出</el-button>
            </div>
        </div>
        <div style="height: 490px;margin-bottom: 20px;padding: 0 10px;">
            <el-table
                :data="paydata"
                v-loading="loading"
                border
                stripe
                style="width: 100%"
                height="100%">
                <el-table-column
                    prop="payname"
                    align="center"
                    label="缴费项目名称"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="paylevel"
                    label="缴费项目优先级"
                    align="center"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="paynum"
                    align="center"
                    label="项目用量/时长">
                </el-table-column>
                <el-table-column
                    prop="paymoney"
                    align="center"
                    sortable
                    label="项目价格">
                </el-table-column>
                <el-table-column
                    prop="paytime"
                    align="center"
                    sortable
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="username"
                    align="center"
                    label="通知人">
                    <template slot-scope="scope">
                        {{ scope.row.username == null?"暂无":scope.row.username }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="paystatus"
                    align="center"
                    label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.paystatus == 1?"已通知":"未通知" }}
                    </template>
                </el-table-column>
                
                <el-table-column
                    align="center"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                        <el-button style="padding: 6px 10px;"  size="mini" :disabled="scope.row.parkstatus==1?true:false" @click="openpay(scope.row.id,scope.row.coststatus,)" plain>通知</el-button>
                        <el-button style="padding: 6px 10px;color: #409EFF;" size="mini" @click="editpay(scope.row.id)" plain>查看</el-button>
                        <el-button style="padding: 6px 10px;background-color: white;color: black;" size="mini" type="danger" @click="deletepay(scope.row.id)" plain>作废</el-button>
                </template>
                </el-table-column>
                
                </el-table>
        </div>
        <div style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                background
                @current-change="handleCurrentChange"
                :page-sizes="[5, 9, 20, 50]"
                :page-size="9"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paytotal">
            </el-pagination>
        </div>
    </div>
    <div>
        <el-dialog
        title="计费通知"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
                <div style="margin-bottom: 20px">
                    <el-input v-model="noticeinput" placeholder="请输入用户账号" style="width: 300px;margin-right: 15px"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="noticesearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh-right" @click="noticerewrite" style="background-color: #F7BA2A;">重置</el-button>
                </div>
                <div style="margin-bottom: 15px;">
                    <el-table
                        :data="noticedata"
                        stripe
                        highlight-current-row
                        @current-change="noticeselect"
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        align="center"
                        label="序号"
                        width="50">
                        </el-table-column>
                        <el-table-column
                        prop="username"
                        align="center"
                        label="用户账号"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="homeaddress"
                        align="center"
                        label="家庭住址"
                        show-overflow-tooltip
                        width="220">
                        </el-table-column>
                        <el-table-column
                        prop="type"
                        align="center"
                        label="类型">
                        <template slot-scope="scope">
                            {{ scope.row.type ==  1?"管理员":"普通用户" }}
                        </template>
                        </el-table-column>
                        <el-table-column
                        prop="coststatus"
                        label="缴费状态"
                        align="center"
                        width="120">
                        <template slot-scope="scope">
                            {{ scope.row.coststatus==1?"已缴费":"未缴费" }}
                        </template>
                        </el-table-column>
                    </el-table>
                    
                </div>
                <div style="text-align: right;">
                    <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :page-sizes="[7, 10, 20, 30]"
                    :page-size="7"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="noticetotal">
                    </el-pagination>
                </div>
                <div style="text-align: right;margin-top: 15px;">
                    <el-button size="medium" type="primary" @click="noticecancel">取消</el-button>
                    <el-button size="medium" type="primary" @click="notifymessage">通知</el-button>
                </div>
        </el-dialog>
    </div>
    

  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
    data(){
        return{
            loading:false,
            //小窗口数据
            noticedata:[],
            noticetotal:"",
            // 模态框
            dialogVisible:false,
            //第一行输入框
            input1:"",
            select1:"",
            // 初始化载荷
            paypage:{
                c_id: 7,
                paymoney:"", 
                paystatus: "",
                currPage: 0,
                pageNum: 9,
            },
            // 表格信息
            paydata:[],
            paytotal:"",
            // 树形菜单
            paytree: [{
                id:1,
                label: '缴费项目',
                children: [
                    {
                        id:2,
                        label: '电费项目',
                        children: [{
                            id:7,
                            label: '电费目录表'
                        }]
                    },
                    {
                        id:3,
                        label: '水费项目',
                        children: [
                            {
                                id:8,
                                label: '水费固定月目录表'
                            },
                            {
                                id:9,
                                label: '水费按量计价目录表'
                            }
                        ]
                    },
                    {
                        id:4,
                        label: '天然气项目',
                        children: [{
                            id:10,
                            label: '天然气目录表'
                        }]
                    },
                    {
                        id:5,
                        label: '物业费项目',
                        children: [{
                            id:11,
                            label: '物业费目录表'
                        }]
                    },
                    {
                        id:6,
                        label: '宽带费项目',
                        children: [{
                            id:12,
                            label: '宽带费目录表'
                        }]
                    },
                ]
                }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            //导出专用数据
            exportdata:[],
            //作废载荷
            deletepage:{
                id:"",
                token:sessionStorage.getItem("token")
            },
            
            // 小窗口载荷
            noticepage:{
                username: "",
                currPage: 0,
                pageNum: 7,
            },
            //小窗口搜索
            noticeinput:"",
            //小窗口通知载荷
            notifypage:{
                u_id: "",
                c_id: "",
                coststatus: "",
                paystatus: 1,
                username:"",
                token:sessionStorage.getItem("token"),
            }
           
        }
    },
    created(){
        this.getpaymessage()
        this.getnoticemessage()
    },
    methods:{
        //初始化数据
        getpaymessage(){
            this.loading = true
            this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.paypage}).then((res)=>{
                console.log(res.data)
                this.exportdata = res.data.data
                this.paydata = res.data.data
                this.paytotal = res.data.total
                setTimeout(() => {
                    this.loading = false
                }, 500);
                for(let i =0;i<this.paydata.length;i++){
                    const date = new Date(this.paydata[i].paytime);  
                    const utcHours = date.getUTCHours();  
                    const beijingHours = (utcHours + 8) % 24;
                    const minutes = date.getUTCMinutes();  
                    const seconds = date.getUTCSeconds();
                    const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()}`;
                    this.paydata[i].paytime = formattedTime;
                    
                }
            })
        },
        //分页器方法
        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.paypage.currPage = 0
                this.paypage.pageNum = val
                this.getpaymessage()
        },
        handleCurrentChange(val) {
            this.paypage.currPage = val-1;
            this.getpaymessage()
        },
        handleSizeChange2(val) {
                console.log(`每页 ${val} 条`);
                this.noticepage.currPage = 0
                this.noticepage.pageNum = val
                this.getnoticemessage()
        },
        handleCurrentChange2(val) {
            this.noticepage.currPage = val-1;
            this.getnoticemessage()
        },
        //树形
        handleNodeClick(data) {
            console.log(data);
            this.paypage.c_id = data.id
            this.paypage.currPage = 0
            this.getpaymessage()
        },
        //查询
        lookfor(){
            this.paypage.paymoney = this.input1
            this.paypage.paystatus = this.select1
            this.paypage.currPage = 0
            this.getpaymessage()
        },
        //新增
        addpay(){
            this.$router.push({
                path:"/pay/payadd",
                query:{
                    flag:1,
                    coststatus:2,
                }
            })
        },
        //重置
        reloadpay(){
            this.paypage.paymoney = ""
            this.paypage.paystatus = ""
            this.paypage.currPage = 0
            this.getpaymessage()
        },
        //导出
        exportpay(){
            let data = []
                for(let i =0;i<this.exportdata.length;i++){
                    let a = {
                        "缴费项目名称":this.exportdata[i].payname,
                        "缴费项目优先级":this.exportdata[i].paylevel,
                        "项目用量/时长":this.exportdata[i].paynum,
                        "项目价格":this.exportdata[i].paymoney,
                        "创建时间":this.exportdata[i].paytime,
                        "状态":this.exportdata[i].paystatus,
                    }
                    data[i]=a
                    
                }
                const worksheet = XLSX.utils.json_to_sheet(data) //传入要导出的表格数据
                // 表格数据
                const workbook = XLSX.utils.book_new();
                XLSX.utils.book_append_sheet(workbook,worksheet,"data");//data为自定义表名
                XLSX.writeFile(workbook,"one.xlsx");//ond.xlsx  文件名
        },
        //作废
        deletepay(id){
            this.$confirm('确定永久作废这条计费项目?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deletepage.id = id
                this.$axios.get("http://community.byesame.com/cost/delCostData",{params:this.deletepage}).then((res)=>{
                    console.log(res)
                    this.getpaymessage()
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //查看
        editpay(id){
            this.$router.push({
                path:"/pay/payadd",
                query:{
                    flag:2,
                    id:id,
                }
            })
        },
        //打开小窗口
        openpay(c_id,coststatus){
                this.notifypage.c_id = c_id
                this.notifypage.coststatus = coststatus
                this.dialogVisible = true
            },
        //小窗口数据初始化
        getnoticemessage(){
            this.$axios.get("http://community.byesame.com/users/getUserList",{params:this.noticepage}).then((res)=>{
                console.log(res)
                this.noticedata = res.data.data
                console.log(this.noticedata,"小窗口数据")
                this.noticetotal = res.data.total
            })
        },
        //小窗口取消
        noticecancel(){
            this.dialogVisible = false
        },
         //小窗口搜索
         noticesearch(){
            this.noticepage.username = this.noticeinput
            this.noticepage.currPage = 0
            this.getnoticemessage()
        },
        //小窗口单选
        noticeselect(val) {
            this.notifypage.u_id = val.id
            this.notifypage.username = val.username
        },
        //小窗口通知
        notifymessage(){
            this.$confirm('确定通知改用用户缴费?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                if(this.notifypage.u_id != ""){
                    this.$axios.post("http://community.byesame.com/cost/updateCostData",this.notifypage).then((res)=>{
                        console.log(res)
                        this.dialogVisible = false
                        this.getpaymessage()
                        this.$message({
                            type: 'success',
                            message: '通知成功!'
                        });
                    })
                }
            
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消通知'
            });          
            });
            
        },
        //小窗口重置
        noticerewrite(){
            this.noticepage.username= ""
            this.noticeinput = ""
            this.noticepage.currPage=0
            this.noticepage.pageNum=7
            this.getnoticemessage()
        }
    }
}
</script>

<style scoped>
::v-deep .el-table th{
    background-color: #EEF1F6;
}
::v-deep.el-table thead {
  font-weight: bold;
  font-size: 16px;
  color: black;
}
::v-deep .el-table tr{
    color: black;
    font-size: 14px;
}



::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
</style>